<template>
    <base-breadcrumb>
        <a-row :gutter="24" class="page-height">
            <!-- 左侧列表 -->
            <a-col :span="5">
                <a-card v-loading="spinning" class="page-height-tree">
                    <a-list
                        class="mb12"
                        :grid="{ gutter: 10, column: 1 }"
                        style="box-sizing: border-box"
                        :data-source="listData"
                    >
                        <a-list-item slot="renderItem" slot-scope="item">
                            <a-card :title="item.title" style="text-align: center; background: #f2f2f2">
                                <div
                                    v-for="(item, index) in listRowData"
                                    :key="index"
                                    :class="{ 'left-TypeList': leftTypeList, SelectColor: SelectColor == index }"
                                    @click="changeGetTable(index, item)"
                                >
                                    {{ item.name }}
                                    <span v-if="!item.status" class="del_btn">（停用）</span>
                                </div>
                            </a-card>
                        </a-list-item>
                    </a-list>
                    <div >
                        <a-button style="margin:0 10px 10px 0 ;" v-btnPermission="'stm_008_addtype_01'" type="primary" @click="addClass"> 新增 </a-button>
                        <a-button  style="margin:0 10px 10px 0 ;" v-btnPermission="'stm_008_editype_02'" type="primary" :disabled="listRowData.length < 1"
                                  @click="editClass">
                            编辑
                        </a-button>
                        <a-button
                          style="margin:0 10px 10px 0 ;"
                            v-if="initClassData && initClassData.status" v-btnPermission="'stm_008_clotype_03'" type="danger"
                            :disabled="listRowData.length < 1" @click="prohibit(true)">
                            停用
                        </a-button>
                        <a-button v-else v-btnPermission="'stm_008_opetype_04'" :loading="openLoading" type="primary"
                            :disabled="listRowData.length < 1"
                                  style="margin:0 10px 10px 0 ;"
                            @click="getEnable(true)">
                            启用
                        </a-button>
                        <a-button v-btn-permission="'stm_008_deltype_11'" :loading="openLoading" type="danger"
                            :disabled="listRowData.length < 1"
                            @click="delType()">
                            删除
                        </a-button>
                    </div>
                </a-card>
            </a-col>
            <!-- 右侧表格 -->
            <a-col :span="19" class="page-height-list-wrapper">
                <a-card  class="page-height-list">
                    <!-- <title-name title="科技成果分类" /> -->
                    <a-button
                        v-btnPermission="'stm_008_add_05'"
                        :disabled="!ClassId"
                        class="mb12"
                        type="primary"
                        @click="addGrade"
                    >
                        添加等级
                    </a-button>
                    <!-- 导出 -->
                    <excel class="ml12" ref="exportAll" :fileName.sync="initClassData.name" is-click-generate="false">
                        <a-button
                         v-btnPermission="'stm_008_exp_10'"
                            type="primary"
                            icon="download"
                            :loading="loadingBtn"
                            slot="excelBtn"
                            :disabled="!ClassId"
                            @click="exportAll"
                            >导出</a-button
                        >
                    </excel>
                    <list-table
                        ref="table"
                        row-key="id"
                        :columns="columns"
                        :isScrollX="false"
                        :request="loadData"
                        show-size-changer
                        show-quick-jumper
                        :showPage="false"
                    >
                        <div slot="action" slot-scope="text, record">
                            <MoreButton>
                            <a v-btnPermission="'stm_008_edi_06'" @click="handleEdit(record)">编辑</a>
                            <a
                                v-if="record.status"
                                v-btnPermission="'stm_008_clo_07'"
                                style="color: red"
                                @click="prohibit(false, record)"
                                >停用</a
                            >
                            <a v-else v-btnPermission="'stm_008_ope_08'" @click="getEnable(false, record)"
                                >启用</a
                            >
                            <a v-btn-permission="'stm_008_del_09'" style="color: red" @click="del(record)"
                                >删除</a
                            >
                            </MoreButton>
                        </div>
                    </list-table>
                </a-card>
            </a-col>
        </a-row>
        <add-grade-post
            ref="createModal"
            :visible="visible"
            :loading="confirmLoading"
            :model="mdl"
            @cancel="handleCancel"
            @ok="handleOk"
        />
        <add-class-post
            ref="createModal1"
            :visible="visible1"
            :loading="confirmLoading"
            :model="md2"
            @cancel="handleCancel"
            @ok="handleOk"
        />
        <warning :visible="visible2" :loading="confirmLoading" @cancel="handleCancel" @ok="getWarning" />
    </base-breadcrumb>
</template>

<script>
import { STable } from '@/components'
import {
    getClassifyList,
    getGradeList,
    getAddGrade,
    getEditGrade,
    getAddClass,
    getEditClass,
    deactivate,
    del,
    delType
} from '@/api/achievementsType'
import addGradePost from './addGradePost'
import addClassPost from './addClassPost'
import warning from './warning'

const columns = [
    {
        title: '成果类型',
        dataIndex: 'levelName',
        key: 'levelName'
    },
    {
        title: '排序',
        key: 'sort',
        width: 100,
        dataIndex: 'sort'
    },
    {
        title: '成果描述',
        key: 'description',
        width: 500,
        ellipsis: true,
        dataIndex: 'description'
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: 150,
        key: 'action',
        scopedSlots: { customRender: 'action' }
    }
]
const listData = [
    {
        title: '科技成果分类'
    }
]
export default {
    name: 'a' + Date.now(),
    data() {
        return {
            listData,
            columns,
            loadingBtn: false,
            spinning: false,
            listRowData: [],
            leftTypeList: true,
            SelectColor: undefined,
            ClassId: undefined,
            visible: false,
            mdl: null,
            md2: null,
            openLoading: false,
            confirmLoading: false,
            visible2: false,
            loadData: (parameter) => {
                // const requestParameters = Object.assign({}, parameter, this.queryParam)
                if (!this.ClassId) return
                parameter.typeId = this.ClassId
                // console.log('loadData request parameters:', requestParameters)
                return getGradeList(parameter).then((res) => {
                    if (res.code === 200) {
                        // res.data.data = res.data.data.reverse()
                        res = res.data
                        res.code = 200;
                        return res
                    }
                    return
                })
            },
            category: 0,
            GradeId: undefined,
            visible1: false,
            SelectGrade: undefined,
            warningStatus: true,
            initClassData: {},
            classSatus: false
        }
    },
    components: {
        STable,
        addGradePost,
        addClassPost,
        warning
    },
    created() {
        this.getClassifyList()
        this.SelectColor = 0
    },
    mounted() {
        this.$refs.exportAll.tableToExcelFile(
          {
            columns:[
              { title: '成果类型', dataIndex: 'levelName' },
              { title: '成果描述', dataIndex: 'description' }
            ]
          },
            0
        )
    },
    methods: {
        /**
         * 导出
         */
        exportAll() {
            this.loadingBtn = true

            getGradeList({ typeId: this.ClassId })
                .then((res) => {
                    this.loadingBtn = false
                    this.$refs.exportAll.setDataAndGenerate(res.data.data)
                    this.$message.success('导出成功')
                })
                .catch((e) => {
                    console.log(e)
                    this.loadingBtn = false
                })
        },
        delType() {
            if (!this.initClassData) return this.$noticeWarning('请选中科技成果分类')
            this.$delList3(
                delType,
                (res) => {
                    this.ClassId = undefined
                    this.getClassifyList()
                },
                { id: this.initClassData.id },
                null,
                true
            )
        },
        del(record) {
            this.$delList3(
                del,
                (res) => {
                    this.$refs.table.refresh(true)
                },
                { id: record.id },
                null,
                true
            )
        },
        getClassifyList() {
            this.spinning = true
            getClassifyList()
                .then((res) => {
                    this.spinning = false
                    if (res.code == 200 && res.data.length > 0) {
                        this.listRowData = res.data
                        if (!this.ClassId){
                          this.ClassId = this.listRowData[0].id
                          this.initClassData = this.listRowData[0]
                          this.SelectColor = 0
                          this.classSatus =  this.listRowData[0].status
                        }
                        this.$refs.table.refresh()
                    }
                })
                .catch((res) => {
                    this.spinning = false
                })
        },
        // 点击左边列表
        changeGetTable(index, item) {
            this.ClassId = item.id
            this.SelectColor = index
            this.initClassData = item
            this.classSatus = item.status
            // this.$refs.table.loadData()
            this.$refs.table.refresh()
        },
        // getGradeTableData() {
        //   requestParameters.id = this.ClassId
        //   return getGradeList(requestParameters).then(res => {
        //     return res
        //   })
        // },
        addGrade() {
            this.mdl = {}
            this.visible = true
            this.category = '等级添加'
        },
        handleCancel(waring) {
            if (waring) {
                console.log(waring)
                this.visible2 = false
                return false
            }
            this.visible2 = false
            this.visible = false
            this.visible1 = false
        },
        handleOk(subQuerParam) {
            this.confirmLoading = true
            switch (this.category) {
                case '等级添加':
                    const AddGradeForm = this.$refs.createModal.$refs.form
                    AddGradeForm.validate((valid) => {
                        if (!valid) {
                            this.confirmLoading = false
                            return
                        }
                        subQuerParam.typeId = this.ClassId
                        getAddGrade(subQuerParam)
                            .then((res) => {
                                this.confirmLoading = false
                                if (res.code == 200 || res.data.code == 200) {
                                    AddGradeForm.resetFields()
                                    this.$refs.table.refresh()
                                    this.$message.success('新增成功')
                                    this.visible = false
                                }
                            })
                            .catch((res) => {
                                this.confirmLoading = false
                            })
                    })

                    break
                case '等级编辑':
                    const EditGradeForm = this.$refs.createModal.$refs.form
                    EditGradeForm.validate((valid) => {
                        if (!valid) {
                            this.confirmLoading = false
                            return
                        }
                        subQuerParam.typeId = this.ClassId
                        subQuerParam.levelId = this.GradeId
                        getEditGrade(subQuerParam)
                            .then((res) => {
                                this.confirmLoading = false
                                if (res.code == 200 || res.data.code == 200) {
                                    EditGradeForm.resetFields()
                                    this.$refs.table.refresh()
                                    this.$message.success('编辑成功')
                                    this.visible = false
                                }
                            })
                            .catch((res) => {
                                this.confirmLoading = false
                            })
                    })
                    break
                case '成果分类添加':
                    const AddClassForm = this.$refs.createModal1.$refs.form
                    AddClassForm.validate((valid) => {
                        if (!valid) {
                            this.confirmLoading = false
                            return
                        }
                        getAddClass(subQuerParam)
                            .then((res) => {
                                this.confirmLoading = false
                                if (res.code === 200) {
                                    this.$message.success('新增成功')
                                    this.visible1 = false
                                    this.getClassifyList()
                                }
                            })
                            .catch((res) => {
                                this.confirmLoading = false
                            })
                    })
                    break
                case '成果分类编辑':
                    const EditClassForm = this.$refs.createModal1.$refs.form
                    EditClassForm.validate((valid) => {
                        if (!valid) {
                            this.confirmLoading = false
                            return
                        }
                        subQuerParam.id = this.ClassId
                        getEditClass(subQuerParam)
                            .then((res) => {
                                this.confirmLoading = false
                                if (res.code === 200) {
                                    this.$message.success('编辑成功')
                                    this.visible1 = false
                                    this.getClassifyList()
                                }
                            })
                            .catch((res) => {
                                this.confirmLoading = false
                            })
                    })
                    break
            }
        },
        handleEdit(record) {
            this.mdl = { ...record }
            this.visible = true
            this.category = '等级编辑'
            this.GradeId = record.id
        },
        addClass() {
            this.visible1 = true
            this.md2 = {}
            this.category = '成果分类添加'
        },
        editClass() {
            if (!this.initClassData) return this.$noticeWarning('请选中科技成果分类')
            this.md2 = { ...this.initClassData }
            this.visible1 = true
            this.category = '成果分类编辑'
        },
        prohibit(type, record) {
            if (!this.initClassData) return this.$noticeWarning('请选中科技成果分类')
            if (type) {
                if (this.ClassId) {
                    this.visible2 = true
                    this.warningStatus = true
                } else {
                    this.$message.info('请选择成果分类')
                }
            } else {
                this.SelectGrade = record
                this.visible2 = true
                this.warningStatus = false
            }
        },
        getWarning() {
            const typeId = this.initClassData.id
            if (this.SelectGrade) {
                var gradeId = this.SelectGrade.id
            }
            this.confirmLoading = true
            if (this.warningStatus) {
                deactivate({ typeId: typeId, status: true })
                    .then((res) => {
                        this.confirmLoading = false
                        if (res.data.code === 200) {
                            this.visible2 = false
                            this.$message.success('停用成功')
                            this.getClassifyList()
                        } else {
                            this.visible2 = false
                            this.$message.error('停用失败')
                        }
                    })
                    .catch((res) => {
                        this.confirmLoading = false
                    })
            } else {
                deactivate({ typeId: typeId, gradeId: gradeId, statu: true })
                    .then((res) => {
                        this.confirmLoading = false
                        if (res.data.code === 200) {
                            this.visible2 = false
                            this.$message.success('停用成功')
                            this.$refs.table.refresh()
                        } else {
                            this.visible2 = false
                            this.$message.error('停用失败')
                        }
                    })
                    .catch((res) => {
                        this.confirmLoading = false
                    })
            }
        },
        getEnable(type, record) {
            if (!this.initClassData) return this.$noticeWarning('请选中科技成果分类')
            const ClassId = this.initClassData.id
            if (record) {
                var gradeId = record.id
            }
            if (type) {
                this.openLoading = true
                deactivate({ typeId: ClassId, status: false })
                    .then((res) => {
                        this.openLoading = false
                        if (res.data.code === 200) {
                            this.getClassifyList()
                            this.$message.success('启用成功')
                        } else {
                            this.$message.error('启用失败')
                        }
                    })
                    .catch((res) => {
                        this.openLoading = false
                    })
            } else {
                deactivate({ typeId: ClassId, gradeId: gradeId, status: false }).then((res) => {
                    if (res.data.code === 200) {
                        this.$refs.table.refresh()
                        this.$message.success('启用成功')
                    } else {
                        this.$message.error('启用失败')
                    }
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.left-TypeList {
    margin: 10px 0;
    background: white;
    padding: 10px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
}

/deep/ .ant-card-bordered.ant-card-body {
    background: #f2f2f2;
}

.SelectColor {
    background: #0e7ed0;
    color: white;
}
</style>
